<html>

<head>
    <meta charset="utf8" />
    <title>配置海报</title>
    <script src="./jquery-3.3.1.js"></script>
    <style>
        .config{
            position: fixed;
            top:0px;
            left: 0px;
        }
        label{
            text-align: right;
            display: inline-block;
            width:120px;
            padding: 0px;
            margin:0px;
        }
        .show{
            position: absolute;
            top:200px;
        }
    </style>
</head>

<body>
    <form method="GET" action="">
        <div class="config">
            <div class="choose_activity">
                <label>请选择活动类型:</label>
            </div>
            <div class="x_pos">
                <label>x坐标:</label>
                <input type="text" name="posx" required />
            </div>
            <div class="y_pos">
                <label>y坐标:</label>
                <input type="text" name="posy" required />
            </div>
            <div class="width">
                <label>宽度:</label>
                <input type="text" name="width" required />
            </div>
            <div class="height">
                <label>高度:</label>
                <input type="text" name="height" required />
            </div>
            <div class="commit">
                <button type="reset">重置</button>
                <button type="submit">提交</button>
            </div>
        </div>
    </form>

    <div class="show">
        <img src="./image1/微信图片_20180919112024.jpg" />
    </div>
</body>
<script>
    $("form").submit(
        function () {
            data = $("form").serialize();
            type = $(":checked").attr("data-type");
            $.ajax(
                {
                    url: "./ConfigSet.php?" + data + "&type=" + type,
                    dataType: "json",
                    type: "Get",
                    success: function (data) {
                        if (data.status == 0) {
                            alert(data.msg);
                        } else {
                            changeImage(data);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                    }
                }
            );
            return false;

        }
    );

    function parseConfig(data) {
        config = data.config;
        for (name in config) {
            value = config[name];
            $("input[name='" + name + "']").attr("value", value);
        }
    }

    function changeImage(data) {
        image = data.image;
        $("img").attr("src", image);
    }

    function setSelect(data) {
        html = "<select name='id'  onchange='choose()'>";
        choose_data = data.choose_data;
        for (index in choose_data) {
            type = choose_data[index]["en_name"];
            id = choose_data[index]["id"];
            name = choose_data[index]["name"];
            html = html + "<option   " + "value='" + id + "'" + "data-type='" + type + "'" + ">" + name + "</option>"
        }
        html = html + "</select>";
        $("label:first").after(html);
    }

    function choose() {
        index = event.currentTarget.selectedIndex;
        html = $("select>option:eq(" + index + ")");
        id = $(html).val();
        id = parseInt(id);
        type = $(html).attr("data-type");
        $.ajax(
            {
                url: "./ConfigSet.php?" + "type=" + type + "&id=" + id,
                type: "GET",
                dataType: "json",
                success: function (data) {
                    if (data.status == 0) {
                        alert(data.msg);
                    } else {
                        parseConfig(data);
                        changeImage(data);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            }
        );

    }



    $(document).ready(function () {
        $.ajax(
            {
                url: "./ConfigSet.php",
                type: "GET",
                dataType: "json",
                success: function (data) {
                    if (data.status == 0) {
                        alert(data.msg);
                    } else {
                        parseConfig(data);
                        changeImage(data);
                        setSelect(data);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            }
        );
    });
</script>

</html>